<!--
 * @Description: 
 * @Author: 阳婷
 * @Date: 2021-03-19 11:15:53
 * @LastEditTime: 2023-02-07 15:18:05
 * @LastEditors: 阳婷
-->
<template>
    <div class="sideBox">
        <div class="sideBoxInfo">
            <el-form ref="forms" :rules="rules" :model="form" label-width="140px">
                <el-form-item label="商品编码" prop="product_code">
                    <el-input v-model="form.product_code" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="product_name">
                    <el-input v-model="form.product_name" clearable></el-input>
                </el-form-item>
                <el-form-item label="商品类型" prop="category_id">
                    <el-select class="input-full" v-model="form.category_id" filterable placeholder="商品类型">
                        <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="form.price" type="number" style="width:100px;margin-right:10px;" clearable>
                    </el-input>元
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input v-model="form.unit" clearable></el-input>
                </el-form-item>
                <el-form-item label="商品状态" prop="status">
                    <el-select class="input-full" v-model="form.status" filterable placeholder="商品状态">
                        <el-option v-for="item in outOfStock" :key="item.key" :label="item.name" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品图片">
                    <!-- <el-upload class="upload-demo" :before-upload="upFile" :show-file-list="false" action="">
                        <el-button size="small" type="success">点击上传</el-button>
                    </el-upload> -->
                    <el-upload class="upload-demo" :before-upload="upFile" :show-file-list="false" action="">
                        <el-button size="small" type="success">点击上传</el-button>
                    </el-upload>
                    <img v-show="form.image" class="productImg" :src="form.images" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="footerBtn">
            <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {
        ref,
        reactive,
        toRefs,
        defineComponent,
        onMounted,
        watch,
        getCurrentInstance
    } from "vue";
    import router from "@/router";
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    import {
        newUpload
    } from "@/utils/ajax"
    export default defineComponent({
        props: ["rowData", "categories"],
        setup(props) {
            const datas = reactive({
                rules: {
                product_code: [{
                        required: true,
                        message: "请输入商品编码",
                        trigger: "blur"
                    }],
                    product_name: [{
                        required: true,
                        message: "请输入商品名称",
                        trigger: "blur"
                    }],
                    category_id: [{
                        required: true,
                        message: "请选择商品类型",
                        trigger: "blur"
                    }],
                    price: [{
                        required: true,
                        message: "请输入价格",
                        trigger: "blur"
                    }],
                    unit: [{
                        required: true,
                        message: "请输入单位",
                        trigger: "blur"
                    }],
                    status: [{
                        required: true,
                        message: "请选择商品状态",
                        trigger: "blur"
                    }],
                    image: [{
                        required: true,
                        message: "请上传商品图片",
                        trigger: "blur"
                    }]
                },
                outOfStock: [{
                    key: 1,
                    name: "在售"
                }, {
                    key: 2,
                    name: "缺货"
                }, {
                    key: 0,
                    name: "已下架"
                }],
                form: {
                    id: '',
                    category_id: '',
                    image: '',
                    remark: '',
                    price: "0",
                    product_code: '',
                    product_name: "",
                    status: 1,
                    unit: ""
                }
            })
            const { proxy } = getCurrentInstance();
            const forms = ref(null)
            onMounted(() => {
                clearData();
                if (!isEmptyObject(props.rowData)) {
                    datas.form = deepCopy(props.rowData)
                    datas.form.images = datas.form.image ? process.env.VUE_APP_BASE_URL + datas.form.image : ""
                }
            });
            watch(() => props.rowData, (newRow, oldRow) => {
                clearData();
                if (!isEmptyObject(newRow)) {
                    datas.form = deepCopy(newRow);
                    datas.form.images = datas.form.image ? process.env.VUE_APP_BASE_URL + datas.form.image : ""
                }
            });
            // const getImageUrl = () => {
            //     var url = 
            //     return url.toString()
            // }
            const onSubmit = () => {
                if (datas.form.product_code) {
                if (datas.form.product_name) {
                    if (datas.form.price !== "") {
                        if (datas.form.unit !== "") {
                            if (datas.form.id !== "") {
                                update()
                            } else {
                                add()
                            }
                        } else {
                            proxy.$message({
                                type: "warning",
                                message: "单位必须填写"
                            })
                        }
                    } else {
                        proxy.$message({
                            type: "warning",
                            message: "商品价格必须填写"
                        })
                    }
                } else {
                    proxy.$message({
                        type: "warning",
                        message: "商品名称必须填写"
                    })
                }
                } else {
                    proxy.$message({
                        type: "warning",
                        message: "商品编码必须填写"
                    })
                }
            };
            const add = () => {
                proxy.$ajax("post", "/api/products", datas.form, data => {
                    if (data.code == 200) {
                        clearData();
                        proxy.$parent.$parent.$parent.show = false
                        proxy.$parent.$parent.$parent.getData()
                    }
                    proxy.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            };
            const update = () => {
                proxy.$ajax("put", "/api/products/" + datas.form.id, datas.form, data => {
                    if (data.code == 200) {
                        clearData()
                        proxy.$parent.$parent.$parent.show = false
                        proxy.$parent.$parent.$parent.getData()
                    }
                    proxy.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            };
            const clearData = () => {
                datas.form = {
                    id: '',
                    category_id: '',
                    image: '',
                    remark: '',
                    price: "0",
                    product_code: '',
                    product_name: "",
                    status: 1,
                    unit: ""
                }
            }
            // const download = () => {
            //     // window.location.href = process.env.VUE_APP_BASE_URL + '/api/admin/public/fileDownload?access-token=' + getToken() + '&file_path=' + this.form.image
            // }
            // const deleteUpload = () => {
            //     proxy.$ajax("post", "/api/admin/public/fileDelete", {
            //         file_path: datas.form.image
            //     }, data => {
            //         if (data.code == 200) {
            //             datas.form.image = ""
            //         }
            //         proxy.$message({
            //             type: "success",
            //             message: data.msg
            //         })
            //     })
            // }
            const upFile = (file) => {
                let fd = new FormData()
                fd.append('file', file)
                newUpload("/api/products/upload", fd).then(res => {
                    if (res.data.code == 200) {
                        datas.form.image = res.data.data
                        datas.form.images = datas.form.image ? process.env.VUE_APP_BASE_URL + datas.form.image : ""
                        proxy.$message({
                            type: "success",
                            message: res.data.msg
                        })
                    } else if(res.data.code == 401){
                        proxy.$message({
                            type: "error",
                            message: res.data.msg
                        })
                        router.push("/login");
                    }else{
                        proxy.$message({
                            type: "warning",
                            message: res.data.msg
                        })
                    }
                })
            }
            return { ...toRefs(datas), onSubmit, forms, upFile }
        }
    })
</script>
<style scoped>
    .tabPane {
        padding: 5px 15px 15px 15px;
    }

    .productImg {
        width: 200px;
        height: 200px;
    }
</style>